<!-- setup为组合式api的关键字，语法糖，他的本身为一个函数 -->
<!-- setup在导入组件后就相当于注册了 -->
<script setup lang="ts">
import {getName} from './index'
//ref 让数据具备响应式，相当于给数据做代理，修改时需要.value
//getCurrentInstance 在组合式API中强制重新渲染
import { getCurrentInstance,ref, } from "vue";
// 给ref添加类型注解：Ref通过interfac定义需要加type
import type { Ref } from "vue";
//类型正规写法
// const user Ref<数据类型>=具体数据

const {ctx}=getCurrentInstance() 

// 在组合式api中的this无法使用，因为setup在创建实例之前就被执行
// console.log(this);
//直接声明的变量不具备响应式
let count =100

// 在组合式API中实现响应式的方法ref
let num=ref(88)

function fn(){
  count++
  console.log(count,getName());
  // 强制更新类似于this.$forceUpdate(),但组合式API中没有this。
  // 缺点组件反复重新加载严重影响性能
  ctx.$forceUpdate()
}

function add(){
  // num为一个对象，在组件中需要通过.value进行修改
  num.value++
}


</script>

<template>
  <main>
    <h1>新项目</h1>
    <h1>{{ count }}</h1>
    <button @click="fn">加一</button>
    <hr>
    <h1>num:{{  num  }}</h1>
    <button @click="add">num加一</button>
    <!-- 在模板中修改num无需.value -->
    <button @click="num--">num减一</button>
  </main>
</template>
